import React, { PureComponent } from 'react';
import { Row, Col, Card, Icon, List, } from 'antd';
import Link from 'umi/link';
import numeral from 'numeral';
import WeatherCard from './dashboard/weather';
import Warning from './dashboard/warning';
import ProjectInfo from './dashboard/projectInfo'
import EchartCurveRT from './dashboard/echartCurvert';
import Indicators from './dashboard/indicators';

import GridContent from '@/components/PageHeaderWrapper/GridContent'
import { ChartCard, MiniArea, MiniBar, MiniProgress } from '@/components/Charts';





// eslint-disable-next-line react/prefer-stateless-function
class dashboard extends PureComponent {
  constructor(props) {
    super(props)

    const visitdata = [];
    for (let i = 11; i >= 0; i--) {
      let myDate = new Date()
      myDate.setMonth(myDate.getMonth() - i);

      visitdata.push({
        "x": `${myDate.getFullYear()}-${myDate.getMonth() + 1}`,
        "y": numeral(10 + Math.random()).format("0.0")
      });
    }

    this.state = {
      pd: [],
      visitdata
    }
  }

  render() {
    const { pd, visitdata } = this.state;

    return (
      <GridContent>
        <Row gutter={24} style={{ marginBottom: 3 }}>
          <Col xs={24}>
            <Indicators />
          </Col>
        </Row>

        <Row gutter={24} style={{ marginBottom: 3 }}>
          <Col xl={8} lg={8} md={8} sm={24} xs={24}>
            <ProjectInfo /> 
          </Col>

          <Col xl={16} lg={16} md={16} sm={24} xs={24}>
            <Row gutter={24} style={{ marginBottom: 3 }}>
              <Col sm={24} xs={24} md={12}>
                <WeatherCard  />
              </Col>
              <Col sm={24} xs={24} md={12} >
                <Warning />
              </Col>
            </Row>

            <Card size="small" title={<Link to={`/iiot_monitor/main-sys`}><span>实时数据</span></Link>} style={{ marginBottom: 24 }}>
              <EchartCurveRT id="trrr11111" />
            </Card>

            <Card size="small" title="当年累计指标" style={{ marginBottom: 24 }} >
              <List size="small" grid={{
                gutter: 16, xs: 1,
                sm: 1,
                md: 6,
                lg: 6,
                xl: 6,
                xxl: 6
              }}>
                <List.Item >
                  <List.Item.Meta
                    description={
                      <List size="small" >
                        <List.Item>
                          <MiniProgress
                            percent={78}
                            strokeWidth={8}
                            target={80}
                            color="#9ABCC3"
                          />
                        </List.Item>
                        <List.Item>
                          <List.Item.Meta
                            title={<span  > <h3>综合效率 78%</h3></span>}
                          />
                        </List.Item>
                      </List>
                    }
                  />

                </List.Item>
                <List.Item>
                  <List.Item.Meta
                    description={
                      <List size="small" >
                        <List.Item>

                          <MiniProgress
                            percent={25}
                            strokeWidth={8}
                            target={65}
                            color="#9BC53D"
                          />
                        </List.Item>
                        <List.Item>
                          <List.Item.Meta
                            title={<span> <h3>发电小时 {numeral(1480).format('0,0')}  h</h3></span>}
                          />
                        </List.Item>
                      </List>
                    }
                  />
                </List.Item>
                <List.Item>
                  <List.Item.Meta
                    description={
                      <List size="small" >
                        <List.Item>

                          <MiniProgress
                            percent={75}
                            strokeWidth={8}

                            color="#9BC53D"
                          />
                        </List.Item>
                        <List.Item>
                          <List.Item.Meta
                            title={<span>发电量 {numeral(6560).format('0,0')}  万kWh</span>}
                          />
                        </List.Item>
                      </List>
                    }
                  />
                </List.Item>

                <List.Item>
                  <List.Item.Meta
                    description={
                      <List size="small" >
                        <List.Item>
                          <MiniProgress
                            percent={75}
                            strokeWidth={8}
                            color="#5BC0EB"
                          />
                        </List.Item>
                        <List.Item>
                          <List.Item.Meta
                            title={<span>制冷量 {numeral(6560).format('0,0')}  万kWh</span>}
                          />
                        </List.Item>
                      </List>
                    }
                  />
                </List.Item>
                <List.Item>
                  <List.Item.Meta
                    description={
                      <List size="small" >
                        <List.Item>
                          <MiniProgress
                            percent={75}
                            strokeWidth={8}
                            color="#E55934"
                          />
                        </List.Item>
                        <List.Item>
                          <List.Item.Meta
                            title={<span>供热量 {numeral(6560).format('0,0')}  万kWh</span>}
                          />
                        </List.Item>
                      </List>
                    }
                  />
                </List.Item>
                <List.Item>
                  <List.Item.Meta
                    description={
                      <List size="small" >
                        <List.Item>
                          <MiniProgress
                            percent={75}
                            strokeWidth={8}
                            color="#FCBF49"
                          />
                        </List.Item>
                        <List.Item>
                          <List.Item.Meta
                            title={<span>供热水量 {numeral(6560).format('0,0')}   m³</span>}
                          />
                        </List.Item>
                      </List>
                    }
                  />
                </List.Item>

              </List>
            </Card>

          </Col>

        </Row>



      </GridContent >
    );
  }
}

export default dashboard;
